<script setup lang="ts">

import {computed} from "vue";

const props = defineProps({
  element: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
const styleStr = computed(()=>{
  let styleStr = ''
  styleStr += `z-index: ${props.element.layer};`
  styleStr += props.element.style
  return styleStr;
})
const ruleJson = computed(()=>{
  if(!props.element.ruleJsonStr) {
    return {}
  }
  try {
    return JSON.parse(props.element.ruleJsonStr)
}catch (e) {
    console.warn(e)
    return {}
  }
})
const content = computed(()=>{
  return ruleJson.value['defaultContent'] || props.element.content
})
</script>

<template>
  <div class="element-text" :style="styleStr">{{ content }}</div>
</template>

<style scoped lang="scss">
.layout-design-element {
  width: 100%;
  height: 100%;
}

.element-text {
  width: 100%;
  height: 100%;
  cursor: move;
  white-space: pre-wrap;
  overflow: hidden;
}
</style>
